<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <h2 class="page-header">Jquery发送Ajax请求</h2> <hr>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型Ajax请求</button>
    </div>

    <script>

        $('button').eq(0).click(function(){ 
            //第一个参数是url，第二个参数是传递过去的参数值(是一个对象)，第三个参数是回调函数
            $.get("http://localhost:8000/server",{a:100,b:20},(data)=>{
                console.log(data)
            })
        })


        $('button').eq(1).click(function(){ 
            //第一个参数是url，第二个参数是传递过去的参数值(是一个对象)，第三个参数是回调函数
            $.post("http://localhost:8000/server-json",{a:100,b:20},(data)=>{
                console.log(data)
            },"json")
        })

        $('button').eq(2).click(function(){ 
            //将所有的东西都封装成为一个对象进行传递
           $.ajax({
                url:"http://localhost:8000/server-json",
                type:"GET",
                data: {a:100,b:200},   //传递过去的参数
                dataType:"json",
                success: function(data){
                    //发送成功之后的回调函数，可以对响应的数据进行处理
                    console.log(data)
                },
                //超时时间的设置
                timeout: 2000,
                //失败回调（包括网络问题，超过超时时间）
                error: function(){
                    console.log('失败的回调函数')
                },
                //头信息
                headers:{
                    c:100,
                    name:'mary'
                }
           })
        })





       




    </script>
    
</body>
</html>